<script setup lang="ts">
import { ElButton, ElInput, ElMessageBox, Sort, ElNotification } from 'element-plus'
import { Plus, CopyDocument } from '@element-plus/icons-vue'
import { Table } from '@/components/Table'
import { getAppParameterNamesListApi, copyToHotelsApi } from '@/api/app-parameter-name'
import { useTable } from '@/hooks/web/useTable'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { TableColumn } from '@/types/table'
import { Search, SearchItem } from '@/components/Search'
import { AppParameterName } from '@/api/app-parameter-name/types'

defineOptions({
  name: 'AppParameterName'
})

const { push } = useRouter()

const conditions = reactive({
  code: '',
  name: ''
})

const defaultSort = ref<Sort>({
  prop: 'sequence',
  order: 'ascending'
})

const { register, tableObject, methods } = useTable<AppParameterName>({
  getListApi: getAppParameterNamesListApi,
  defaultSort: defaultSort.value
})

const { getList, setSearchParams, onSortChanged } = methods

setSearchParams(conditions)

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: '代码',
    width: '300',
    sortable: 'custom'
  },
  {
    field: 'name',
    label: '名称',
    width: '200',
    showOverflowTooltip: true
  },
  {
    field: 'description',
    label: '描述',
    width: 'auto'
  },
  {
    field: 'level',
    label: '可见范围',
    width: '100'
  },
  {
    field: 'sequence',
    label: '序号',
    width: '100px',
    align: 'right',
    headerAlign: 'right',
    sortable: 'custom'
  },
  {
    field: 'action',
    width: '120px',
    label: '操作',
    headerAlign: 'center',
    align: 'center'
  }
])

const AddAction = () => {
  push('/system/app-parameter-name-add')
}

const EditAction = (row: AppParameterName) => {
  push(`/system/app-parameter-name-edit/id/${row.id}`)
}

const copyToHotelsAction = () => {
  ElMessageBox.confirm(
    '确定要将参数模板同步到所有主体吗? 此操作可能耗时较久, 这取决于主体数量',
    '操作确认',
    {
      type: 'warning'
    }
  )
    .then(async () => {
      const res = await copyToHotelsApi()
      if (res) {
        ElNotification.success('操作成功!')
      }
    })
    .catch(() => {})
}
</script>

<template>
  <Search :model="conditions" @search="setSearchParams" @reset="setSearchParams">
    <SearchItem label="代码" prop="code">
      <ElInput v-model="conditions.code" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="名称" prop="name">
      <ElInput v-model="conditions.name" maxlength="200" clearable />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <ElButton :icon="Plus" type="primary" @click="AddAction">新建</ElButton>
        <ElButton :icon="CopyDocument" type="danger" @click="copyToHotelsAction"
          >复制到所有主体</ElButton
        >
        <Icon icon="ep:refresh-right" class="mr-8px ml-8px cursor-pointer" />
      </div>
    </div>

    <Table
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :columns="tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      :selection="false"
      :default-sort="defaultSort"
      @register="register"
      @sort-change="onSortChanged"
    >
      <template #action="{ row }">
        <ElButton type="primary" link size="small" @click="EditAction(row)"> 编辑 </ElButton>
      </template>
    </Table>
  </div>
</template>
